<template>
	<view class="select-coupon-page">
		<!-- 可滚动内容区域 -->
		<scroll-view class="scroll-container" scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll">
		<view class="info-card">
			<!-- 优惠券列表 -->
			<view class="coupon-list">
				<view class="coupon-item" v-for="(coupon, index) in couponList" :key="index"
					@click="selectCoupon(coupon, index)">
					<view class="coupon-content">
						<view class="coupon-left">
							<view class="coupon-amount">
								<text class="amount-symbol">¥</text>
								<text class="amount-value">{{ coupon.amount }}</text>
							</view>
							<view class="coupon-condition">
								<text class="condition-text">满{{ coupon.minAmount }}元可用</text>
							</view>
						</view>
						<view class="coupon-right">
							<view class="coupon-title">{{ coupon.title }}</view>
							<view class="coupon-desc">{{ coupon.description }}</view>
							<view class="coupon-bottom">
								<view class="coupon-expire">有效期至：{{ coupon.expireDate }}</view>
								<view class="use-button">
									<text class="use-text">去使用</text>
									<uni-icons type="arrowright" size="20" color="#3486FD"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view class="coupon-check" v-if="selectedIndex === index">
						<uni-icons type="checkmarkempty" size="20" color="#3486FD"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 滚动相关数据
				scrollTop: 0,
				
				selectedIndex: -1, // 默认不选择优惠券
				currentTotal: 0, // 当前订单总金额
				couponList: [{
						id: 1,
						title: '新用户专享券',
						description: '首次下单立减',
						amount: 10,
						minAmount: 50,
						expireDate: '2024-12-31'
					},
					{
						id: 2,
						title: '满减优惠券',
						description: '满100减20',
						amount: 20,
						minAmount: 100,
						expireDate: '2024-12-31'
					},
					{
						id: 3,
						title: '保养专用券',
						description: '汽车保养专用',
						amount: 30,
						minAmount: 200,
						expireDate: '2024-12-31'
					}
				]
			}
		},
		onLoad() {
			// 获取当前订单总金额
			this.calculateCurrentTotal();
			
			// 获取之前选中的优惠券
			const selectedCoupon = uni.getStorageSync('selectedCoupon');
			if (selectedCoupon) {
				// 找到对应的索引
				const index = this.couponList.findIndex(coupon => coupon.id === selectedCoupon.id);
				if (index !== -1) {
					this.selectedIndex = index;
				}
			}
		},
		methods: {
			// 计算当前订单总金额
			calculateCurrentTotal() {
				try {
					const servicesData = uni.getStorageSync('selectedServicesData');
					if (servicesData && servicesData.selectedServices && servicesData.services) {
						let total = 0;
						servicesData.selectedServices.forEach(index => {
							total += parseFloat(servicesData.services[index].price);
						});
						this.currentTotal = total;
					}
				} catch (e) {
					console.log('计算订单总金额失败:', e);
					this.currentTotal = 0;
				}
			},
			
			// 滚动事件处理
			onScroll(e) {
				// 可以在这里添加滚动相关的逻辑
				// 例如：滚动到顶部时显示某些元素等
			},
			
			selectCoupon(coupon, index) {
				// 检查优惠券是否可用
				if (this.currentTotal < coupon.minAmount) {
					uni.showToast({
						title: `当前消费不足，需要满${coupon.minAmount}元`,
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				this.selectedIndex = index;
				// 保存选中的优惠券信息到本地存储
				uni.setStorageSync('selectedCoupon', coupon);
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 300);
			},
		}
	}
</script>

<style scoped>
	.select-coupon-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #0A64E7 500rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
		width: 100%;
		box-sizing: border-box;
	}

	/* 滚动容器样式 */
	.scroll-container {
		flex: 1;
		height: 100vh;
		width: 100%;
		padding: 20rpx;
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}
	
	.info-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		align-items: center;
		background-image: url('/static/images/wgh/椭圆 3 拷贝.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		transition: all 0.3s ease;
		position: relative;
	}

	.coupon-check {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
	}

	.coupon-item:active {
		opacity: 0.8;
		transform: scale(0.98);
	}

	.coupon-content {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.coupon-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
		padding-right: 30rpx;
		border-right: 2rpx dashed #fff;
	}

	.coupon-amount {
		display: flex;
		align-items: baseline;
		margin-bottom: 10rpx;
	}

	.amount-symbol {
		font-size: 24rpx;
		color: #fff;
		font-weight: bold;
	}

	.amount-value {
		font-size: 48rpx;
		color: #fff;
		font-weight: bold;
	}

	.coupon-condition {
		text-align: center;
	}

	.condition-text {
		font-size: 24rpx;
		color: #fff;
	}

	.coupon-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.coupon-title {
		font-size: 32rpx;
		color: #fff;
		font-weight: 600;
	}

	.coupon-desc {
		font-size: 28rpx;
		color: #fff;
	}

	.coupon-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.coupon-expire {
		font-size: 24rpx;
		color: #fff;
	}

	.use-button {
		display: flex;
		align-items: center;
		gap: 5rpx;
	}

	.use-text {
		font-size: 24rpx;
		color: #fff;
	}
</style>